import React from 'react';
import {todoListState, useRecoilState} from "../../recoils";

export default function TodoCreator() {
    const [todoLists, setTodoLists] = useRecoilState(todoListState);

    const pressEnter = (event) => {
        const value = event.target.value;
        if (event.keyCode === 13 && value.length > 0) {
            setTodoLists([
                {
                    id: +new Date(),
                    value: value,
                    isComplete: false
                },
                ...todoLists,
            ])
            event.target.value = '';
        }
    }

    return (<div className="form-group">
        <h3>Create TodoItem</h3>
        <div className="form-group" style={{width: "220px"}}>
            <input className="form-control" type="text" onKeyDown={pressEnter}/>
        </div>
    </div>)
}

